<#include "/oms/iframe/common/head_index.html" />
<link rel="stylesheet" href="${request.contextPath}/static/oms/iframe/plugins/treetable/css/jquery.treetable.theme.bootstrap.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.css" />

<@dictionary type="function" fields="Status,DictionaryType"></@dictionary>
<@dictionary type="listjson" fields="Status,DictionaryType"></@dictionary>

<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">字典数据管理</h3>
				<div class="box-tools pull-right">
					<@shiro.hasPermission name="system:config:dictionary:add">
						<a class="btn btn-sm btn-primary" target="modal" modal="lg" href="${request.contextPath}/system/config/dictionary/data/add">添加</a>
					</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
				<div class="clearfix">
					<form id="search-form" class="" >
						<div class="col-sm-3">
							<div class="input-group">
								<select type="text" class="form-control pull-right" id="dictionaryId" style="width: 100%">
								</select>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="input-group">
								<select type="text" class="form-control pull-right" id="parentId" style="width: 100%">
								</select>
							</div>
						</div>
						<div class="col-sm-3">
							<div class="input-group">
								<button type="button" onclick="searchRefresh();" class="btn btn-primary">搜索</button>
							</div>
						</div>
					</form>
				</div>
				<div class="clearfix" style="padding-top: 15px;">
					<table id="dictionaryDataTreeTable" class="table table-bordered">
						<thead>
							<tr>
								<th class="col-md-2 pd-l-lg">
									<span class="pd-l-sm ml20"></span>字典名称
								</th>
								<th class="col-md-2">字典编码</th>
								<th class="col-md-2">字典值</th>
								<th class="col-md-1">字典类型</th>
								<th class="col-md-1">排序</th>
								<th class="col-md-2">操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<#include "/oms/iframe/common/setting_index.html" />
<#include "/oms/iframe/common/bottom_index.html" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.js"></script>

<script type="text/javascript">
    $.ajax({
        type:"get",
        url:'/system/config/dictionary/treeGrid',
        dataType:'json'
    }).done(function(result){
        var o = [];
        var a = result;
        $.each(a, function() {
            if(this.id != undefined && this.id !=''){
				o.push({'id':this.id,'text':this.name});
            }
        });
        var select2 = $("#dictionaryId").select2({
            data:o,
            placeholder: "字典...",
            allowClear: false,
            language: "zh-CN",
            theme: "bootstrap"
        });


        $("#dictionaryId").on("change", function () {
            if($(this).val()){
				$.ajax({
					type: "get",
					url: '/system/config/dictionary/data/treetable',
					dataType: 'json',
					data: {
						dictionaryId: $(this).val(),
						parentId:"0"
					}
				}).done(function(result){
					$('#parentId').empty();
					var o = [];
					var a = result;
					$.each(a, function() {
						if(this.id != undefined && this.id !=''){
							o.push({'id':this.id,'text':this.name});
						}
					});
					var parentIdSelect = $("#parentId").select2({
						data:o,
						placeholder: "上级字典数据...",
						allowClear: true,
						language: "zh-CN",
						theme: "bootstrap"
					});
					parentIdSelect.val('${parentId}').trigger("change");
				});
            }else{
                var parentIdSelect = $("#parentId").select2({
                    data:[],
                    placeholder: "上级字典数据...",
                    allowClear: true,
                    language: "zh-CN",
                    theme: "bootstrap"
                });
                parentIdSelect.val('${parentId}').trigger("change");
			}
        });

        select2.val('${dictionaryId}').trigger("change");
    });

    $(function () {
        $.ajax({
            type: "get",
            url: '/system/config/dictionary/data/treetable',
            dataType: 'json',
            data: {
                dictionaryId: "${dictionaryId}",
                parentId:"${parentId}"
            }
        }).done(function (result) {
            var tbodyHtmlStr = "";
            for (var i = 0; i < result.length; i++) {

                tbodyHtmlStr +=
                    '<tr data-tt-id="' + result[i].id + '" data-tt-parent-id="' + result[i].parentId + '"  data-tt-branch="'+result[i].hasChildren+'">'
                    + '	<td>'
                    + '   	<i class="fa fa-folder"></i>' + result[i].name
                    + '	</td>'
                    + '	<td>' + result[i].code + '</td>'
                    + '	<td>' + result[i].value + '</td>'
                    + '	<td>' + getDictionaryTypeDictName(result[i].type) + '</td>'
                    + '	<td>' + result[i].seq + '</td>'
                    + '	<td>'
                    + '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/system/config/dictionary/data/view?id=' + result[i].id + '" >'
                    + '			<i class="glyphicon glyphicon-edit"></i>'
                    + '		</a>  '
                    + '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/system/config/dictionary/data/update?id=' + result[i].id + '" >'
                    + '			<i class="glyphicon glyphicon-edit"></i>'
                    + '		</a>  '
                    + '		<a class="btn btn-sm btn-danger" title="删除" callback="dataGridRefresh()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/system/config/dictionary/data/delete?id=' + result[i].id + '">'
                    + '			<i class="glyphicon glyphicon-remove"></i>'
                    + '		</a>'
                    + '   </td>'
                    + '</tr>';
            }
            $('#dictionaryDataTreeTable tbody').html(tbodyHtmlStr);
            var dictionaryDataTreeTable = $("#dictionaryDataTreeTable").treetable({
                theme: 'vsStyle',
                expandable: true,
                onNodeExpand: function () {
                    var node = this;
                    var rows = "<tr data-tt-id=\"loading\" data-tt-parent-id=\"" + node.id + "\" data-tt-branch=\"false\"><td colspan='5'><img src=\"${request.contextPath}/static/oms/default/dist/img/common/loading.gif\"/>loading</td></tr>";
                    dictionaryDataTreeTable.treetable("loadBranch", node, rows);
                    $.get("${request.contextPath}/system/config/dictionary/data/treetable?parentId=" + node.id, {}, function (result) {

                        rows = "";
                        for (var i = 0; i < result.length; i++) {

                            rows +=
                                '<tr data-tt-id="' + result[i].id + '" data-tt-parent-id="' + result[i].parentId + '"  data-tt-branch="'+result[i].hasChildren+'">'
                                + '	<td>'
                                + '   	<i class="fa fa-folder"></i>' + result[i].name
                                + '	</td>'
                                + '	<td>' + result[i].code + '</td>'
                                + '	<td>' + result[i].value + '</td>'
                                + '	<td>' + getDictionaryTypeDictName(result[i].type) + '</td>'
                                + '	<td>' + result[i].seq + '</td>'
                                + '	<td>'
                                + '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/system/config/dictionary/data/view?id=' + result[i].id + '" >'
                                + '			<i class="glyphicon glyphicon-edit"></i>'
                                + '		</a>  '
                                + '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/system/config/dictionary/data/update?id=' + result[i].id + '" >'
                                + '			<i class="glyphicon glyphicon-edit"></i>'
                                + '		</a>  '
                                + '		<a class="btn btn-sm btn-danger" title="删除" callback="dataGridRefresh()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/system/config/dictionary/data/delete?id=' + result[i].id + '">'
                                + '			<i class="glyphicon glyphicon-remove"></i>'
                                + '		</a>'
                                + '   </td>'
                                + '</tr>';
                        }
                        dictionaryDataTreeTable.treetable("unloadBranch", node);
                        dictionaryDataTreeTable.treetable("loadBranch", node, rows);
                    });
                }
            });
        });
    });

    function searchRefresh(){
        var parentId = "";
        var dictionaryId = "";
        if($("#parentId").val()){
            parentId = $("#parentId").val();
        }
        if($("#dictionaryId").val()){
            dictionaryId = $("#dictionaryId").val();
        }
        window.location.href="${request.contextPath}/system/config/dictionary/data/index?parentId="+parentId+"&dictionaryId="+dictionaryId;
    }

</script>